<template>
  <section class="my-container">
    <NavHeader title="我的" />
    <router-link
      :to="userInfo._id ? '/detail' : '/login'"
      class="user-info-wrap"
    >
      <img class="user-img" :src="userInfo.avatar" alt="" />
      <div class="user-wrap">
        <div class="left-wrap">
          <div class="login-text" v-show="!userInfo._id">
            {{ userInfo._id ? userInfo._id : "登录/注册" }}
          </div>
          <div>
            <i class="icon-shouji"></i>
            {{ userInfo.phone ? userInfo.phone : "暂无绑定手机号码" }}
          </div>
        </div>
        <div class="right-wrap">
          <i class="icon-arrow-right"></i>
        </div>
      </div>
    </router-link>
    <div class="info-wrap">
      <div class="left-wrap">
        <div>
          <span class="orange-text">0.00</span>
          元
        </div>
        <div class="grey-text">我的余额</div>
      </div>
      <div class="middle-wrap">
        <div>
          <span class="red-text">0</span>
          个
        </div>
        <div class="grey-text">我的优惠</div>
      </div>
      <div class="right-wrap">
        <div>
          <span class="green-text">0</span>
          分
        </div>
        <div class="grey-text">我的积分</div>
      </div>
    </div>
    <CardList :navList="navList" />
    <CardList :navList="navList2" />
    <section class="logout">
      <mt-button v-show="userInfo._id" type="danger" @click="handleLogout"
        >退出登录</mt-button
      >
    </section>
  </section>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { MessageBox } from 'mint-ui'
import NavHeader from '../../components/NavHeader'
import CardList from '../../components/CardList/index.vue'
export default {
  name: 'My',
  components: {
    NavHeader,
    CardList
  },
  data () {
    return {
      navList: [
        { id: 1, icon: 'icon-dingdan', name: '我的订单', to: '' },
        { id: 2, icon: 'icon-jifen', name: '我的订单', to: '' },
        { id: 3, icon: 'icon-renzhengyonghu', name: '我的订单', to: '' }
      ],
      navList2: [
        { id: 1, icon: 'icon-fuwushangguanli', name: '我的订单', to: '' }
      ]
      // userInfo: JSON.parse(localStorage.get('userInfo'))
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapActions(['loadingLogOut']),
    goLogin () {
      this.$router.push({
        path: '/my/login'
      })
    },
    handleLogout () {
      MessageBox.confirm('确定执行此操作?').then(action => {
        this.loadingLogOut()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/common/stylus/mixins.styl'
.my-container
  width 100%
  height 100%
  .user-info-wrap
    padding-top 80px !important
    top-border-1px(#fff)
    background-color $green
    display flex
    padding 20px 10px
    .user-img
      width 80px
      height 80px
      border-radius(50%)
    .user-wrap
      width 100%
      display flex
      justify-content space-between
      align-items center
      padding 0 20px
      color #fff
      .login-text
        font-size 20px
        margin-bottom 20px
  .info-wrap
    display flex
    justify-content space-around
    align-items center
    padding 20px 20px 0
    background-color #fff
    .left-wrap
      width 30%
      text-align center
      .orange-text
        font-size 28px
        font-weight bold
        color $yellow
      .grey-text
        color #aaa
        padding 10px 0
    .middle-wrap
      width 30%
      text-align center
      .grey-text
        color #aaa
        padding 10px 0
      .red-text
        font-size 28px
        font-weight bold
        color #f00
    .right-wrap
      width 30%
      text-align center
      .grey-text
        color #aaa
        padding 10px 0
      .green-text
        font-size 28px
        font-weight bold
        color #0f0
  .logout
    width 100%
    padding 20px 0
    text-align center
    .btn
      width 100%
</style>
